<template>
  <div>
     <h1>基本资料</h1>
    <div style="width: 500px;height: 600px;margin:20px;">
     <el-form label-width="100px" :model="addModel" :rules="rules" ref="userForm">
      <el-form-item label="登录用户">
        <el-input disabled v-model="addModel.username" ></el-input>
      </el-form-item>
         <el-form-item label="昵称">
        <el-input v-model="addModel.nickname"></el-input>
      </el-form-item>
         <el-form-item label="邮箱">
        <el-input v-model="addModel.email"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="editUser">修改信息</el-button>
      </el-form-item>
     </el-form>
    </div>
  </div>
</template>
<script setup lang="ts">  
 import userStore from '@/store/userStore'
import {ref,computed,reactive} from 'vue'
import type {FormInstance} from 'element-plus'
import {userUpdateInfoService} from '@/api/user'
import { ElMessage } from 'element-plus'
import mitt from '@/utils/mitt'
let user:any=computed(()=>userStore().userInfo)
console.log(user,"---------")
// vue3的计算属性 在js使用 加.value 
let count=ref(111);
let douCount=computed(()=>count.value*2)
console.log(douCount.value,"--------计算属性");

let addModel=reactive({
  email:user.value.email??'',
  username:user.value.username??'',
  id:user.value.id??'',
  nickname:user.value.nickname??''
})
let rules={
  email:[{required:true,message:'请输入邮箱',trigger:'blur'}],
  nickname:[{required:true,message:'请输入昵称',trigger:'blur'}]
}

let userForm=ref<FormInstance|null>()
let editUser= ()=>{
    userForm.value?.validate(async (valid)=>{
       if(valid){
         await userUpdateInfoService(addModel)
         ElMessage.success('修改成功')
         mitt.emit("updateUserInfo")
       }
    })
}


</script>